<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>更新后台用户</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script th:src="@{/util/util.js}"></script>
<script>
	$(function(){
		/* jQuery.validator.addMethod('isKey', function(value, element) {
			var length = value.length;
			var key = /^[0-9a-zA-Z`~!@#$%\^&*\(\)-_+={}|\[\]\;\'\:\"\,\.\\\/\?]{16}$/;
			return (length == 16 && key.test(value));
		}, 'key必须是由16位字母、数字、下划线或特殊符号组成');
		 */
		
		$.validator.addMethod('isKey', function (value, element) {
			var length = value.length;
			var key = /^[0-9a-zA-Z`~!@#$%\^\&\*\(\)\-\_\+\=\{\}\|\[\]\;\'\:\"\,\.\\\/\?]{16}$/;
			if(!(length == 16 && key.test(value))) {
				 $(element).data('error-msg','key必须是由16位字母、数字、下划线或特殊符号组成');
			     return false;
			}
			var key2 = /^([0-9]{16})|([a-zA-Z]{16})|([`~!@#$%\^\&\*\(\)\-\_\+\=\{\}\|\[\]\;\'\:\"\,\.\\\/\?]{16})$/;
			if(key2.test(value)) {
				$(element).data('error-msg','key值过于简单');
				return false;
			}
		    return true;
		}, function(params, element) {
		    return $(element).data('error-msg');
		});
		
		
		jQuery.validator.addMethod('isMobile', function(value, element) {
			var length = value.length;
			var mobile = /^1(3|4|5|7|8)\d{9}$/;
			return (length == 11 && mobile.test(value));
		}, '手机号码格式不正确');
		$.fn.modal.Constructor.prototype.enforceFocus = function () { };
		$("#username").blur(function(){
			var username = $("#username").val();
			if(username!=null && username!='') {
				checkUserName(username);
			}else{
				$("#userNameMsg").html('');
			}
		});
		
		$("select").select2({});
		
		$("#generateSalt").click(function(){
			$("#salt").val(generateUUID());
		});
	});
	
</script>
<style>
	.select2-container .select2-selection--single {
		height:36px;
	}
	.select2-container--default .select2-selection--single {
		border-color: #d2d6de;
	}
</style>
</head>
<body>
<div data-th-object="${role}">
	<span data-th-value="*{id}"></span>
</div>
	<div id="msg"></div>
	<form role="form" id="userForm" data-th-action="@{/addUser}" data-th-object="${user}" data-th-method="post">
		<div class="box-body">
			<input type="hidden" data-th-field="*{id}" name="id"/>
			<input type="hidden" data-th-field="*{state}" name="state"/>
			<input type="hidden" data-th-field="*{delFlag}" name="delFlag"/>
			<input type="hidden" data-th-field="*{remark}" name="remark"/>
			<input type="hidden" data-th-field="*{sysPwd}" name="sysPwd"/>
             <div class="form-group">
               <label for="username">用户名</label>
               <input type="text" required autocomplete="off" class="form-control" name="username" id="username" data-th-field="*{username}" placeholder="输入用户名"/>
               <label id="userNameMsg" style="display:none;"></label>
             </div>
             <div class="form-group" data-th-unless="*{userpassword}">
               <label for="userpassword">密码</label>
               <input onfocus="this.type='password'" required minlength="6" type="text" autocomplete="off" class="form-control" name="userpassword" id="userpassword" data-th-field="*{userpassword}" placeholder="输入密码"/>
             </div>
             <div class="form-group" data-th-if="*{userpassword}">
               <input type="hidden" data-th-field="*{userpassword}" name="userpassword"/>
             </div>
             
             <div class="form-group">
               <label for="nickname">昵称</label>
               <input type="text" required class="form-control" name="nickname" id="nickname" data-th-field="*{nickname}" placeholder="输入昵称"/>
             </div>
             <div class="form-group">
               <label for="phone">手机号</label>
               <input type="text" required  class="form-control number isMobile" name="phone" id="phone" data-th-field="*{phone}" placeholder="输入手机号"/>
             </div>
              <div class="form-group">
               <label for="role">角色</label>
               <select class="form-control select2" id="role" style="widdata-th-100%;" name="role.id" required>
               <option value="">请选择</option>
               <option data-th-each="roleEle : ${roleList}"
                        data-th-selected="${roleEle.id == role.id}" data-th-value="${roleEle.id}" data-th-text="${roleEle.rolename}"></option>
               </select>
             </div>
             <div class="form-group">
               <label for="userKey">key</label>
               <input type="text" maxlength="16" required class="form-control isKey isSimpleKey" name="userKey" id="userKey" data-th-field="*{userKey}" placeholder="输入key"/>
             </div>
             <div class="form-group">
               <label for="salt">salt</label>
               <input type="text" readonly="readonly" required class="form-control" name="salt" id="salt" data-th-field="*{salt}" placeholder="输入salt"/>
               <button type="button" style="margin-top:2px;" class="btn btn-primary" id="generateSalt" name="generateSalt">生成salt值</button>
             </div>
        </div>
	</form>
</body>
</html>